﻿<!DOCTYPE html>

<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CefSharp Example Start Page</title>
    <link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>

  <body>

    <div class="container">

      <div class="page-header" id="pageHeader">
        <h1>.NET Nuts and Bolts <small>HTML5 UI's in desktop applications</small></h1>
      </div>

      <p class="lead">
          In this first paragraph are a number of buttons, the buttons are hooked to normal Javascript functions, which can then
          call directly into the C# code inside the windows forms application.在第一段中有许多按钮，这些按钮被连接到正常的Javascript函数，然后可以直接调用windows窗体应用程序中的c#代码。
      </p>

      <button class="btn btn-primary" id="buttonOne">Save Form Values</button>

      <br />
      <br />

      <p>Next we have an example form for you to fill in, when you post this, the results will go to the winforms application
      then, the application will decide which page to display and what to do with the data.
      </p>

      <p>Note however, in order for the form to be sent to the winform APP, you must trap the form submit event using javascript
        currently, cefsharp has no built in way to intercept the post and grab the data normally from a form action.
      </p>

      <p><span class="text-success">UPDATE:</span> cefsharp does have a way to intercept requests, I've just not figured out how to use it yet :-) I will however update this example once I do.</p>
      <p>
          接下来，我们有一个示例表单供您填写，当您发布此消息时，结果将转到winforms应用程序，应用程序将决定显示哪个页面，以及如何处理这些数据。

          但是要注意，为了将表单发送到winform应用程序，您必须使用javascript来捕获表单提交事件，cefsharp没有内置的方法来拦截post，并且通常从表单操作获取数据。

          更新:cefsharp确实有一种拦截请求的方法，我还不知道如何使用它:-)我将会在我做的时候更新这个例子。
      </p>

      <h4 class="text-info">所有东西都使用Bootstrap来样式化（Everything is styled using Bootstrap） :-)</h4>

      <br />
      <br />

      <form class="form-horizontal" id="testForm">

        <div class="form-group">
          <label for="inputName" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="inputName" placeholder="Name:" autofocus />
          </div>
        </div>

        <div class="form-group">
          <label for="inputEmail" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email:  " />
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </div>

      </form>

    </div>


    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>

  <script>
    
    function isEmpty(str)
    {
      return (!str || 0 === str.length);
    }

    $('#testForm').on('submit', function (e)
    {
      e.preventDefault();
        
      var name = $('#inputName').val();
      var email = $('#inputEmail').val();

      if (isEmpty(name) || isEmpty(email))
      {
        alert("Can't post empty values, please make sure name and email have values");
        return false;
      }

      formEntryHandler.postForm(name, email);

      return false;
    });

    $('#buttonOne').on('click', function (e)
    {
      var name = $('#inputName').val();
      var email = $('#inputEmail').val();

      if (isEmpty(name) || isEmpty(email))
      {
        alert("Can't save empty values, please make sure name and email have values");
        return;
      }

      formEntryHandler.saveCredentials(name, email);
    });

    $('#buttonTwo').on('click', function (e)
    {

    });

    $('#buttonThree').on('click', function (e)
    {

    });

  </script>
  </body>

</html>
